/*
  学习目标：受控组件 - hooks版
  受控组件关键点:
    1. state控制value或checked
    2. onChange配合setState修改数据
  了解- 自定义hooks封装受控组件
   
*/

import React, { useState } from "react";

function useControl() {
  // useXxx是自定义hooks, 其中可以使用其它的hooks
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

export default function App() {
  // 1. 使用useState声明状态
  const name = useControl();
  const intro = useControl();
  const gender = useControl();

  return (
    <div>
      <input type="text" {...name} />
      <textarea {...intro} />
      <input type="text" {...gender} />
    </div>
  );
}
